<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>${sysEn}-品牌故事</title>
    <#include "/common/com_css.ftl" >
    <link rel="stylesheet" href="${ctx}/js/easytree/tree.css">
</head>
<body>
    <div id="wrapper">
        <!----左侧导航开始----->
        <#include "/common/menu.ftl">
        <!----左侧导航结束----->
        <!---右侧内容区开始---->
        <div id="page-wrapper" class="gray-bg">
            <#include "/common/con_nav.ftl">
            <@con_nav_tag current="菜单管理"></@con_nav_tag>
 			<div class="wrapper-content animated fadeInRight">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-lg-4" style="min-height: 1000px">
                                    <ul id="tt" class="easyui-tree"></ul>
                                </div>
                                <div class="col-lg-8">
                                    <div class="ibox" style="display: none;" id="menu-tool" >
                                        <div class="ibox-title">
                                            <h5>编辑菜单</h5>
                                        </div>
                                        <div class="ibox-content">
                                            <div class="form-group row" >
                                                <label class="col-lg-2 col-form-label">选择菜单</label>
                                                <div class="col-lg-6">
                                                    <input type="text" disabled id="menuToolNm" class="form-control"> <span class="form-text m-b-none"></span>
                                                </div>
                                                <div class="col-lg-4">
                                                    <button class="btn btn-outline btn-info btn-lg" id="btnAddSub" tg="addSub" type="button">添加子菜单</button>
                                                    <button class="btn btn-outline btn-primary btn-lg" id="btnEdit" tg="modify" type="button">修改</button>
                                                    <button class="btn btn-outline btn-danger btn-lg" id="btnDel" tg="delete" type="button">删除</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row" style="display: none;" id="menu-edit">
                                        <div class="col-lg-12">
                                        <div class="ibox-content">
                                                <div class="panel panel-default" style="width: 100%;">
                                                <div class="panel-heading">
                                                    添加子菜单
                                                </div>
                                                <div class="panel-body">
                                                    <input type="hidden" id="curMenuId">
                                                    <div class="form-group row">
                                                        <label class="col-lg-2 col-form-label">菜单名称</label>
                                                        <div class="col-lg-6">
                                                            <input type="text" placeholder="菜单名称" id="menuName" class="form-control"> <span class="form-text m-b-none"></span>
                                                        </div>
                                                        <div class="col-lg-3">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-lg-2 col-form-label">菜单地址</label>
                                                        <div class="col-lg-6">
                                                            <input type="text"  placeholder="菜单地址" id="menuAddr" class="form-control"> <span class="form-text m-b-none"></span>
                                                        </div>
                                                        <div class="col-lg-3">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-lg-2 col-form-label">菜单顺序</label>
                                                        <div class="col-lg-6">
                                                            <input type="text"  placeholder="菜单顺序" id="menuSort" class="form-control"> <span class="form-text m-b-none"></span>
                                                        </div>
                                                        <div class="col-lg-3">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-lg-2 col-form-label"></label>
                                                        <div class="col-lg-6">
                                                            <button class="btn btn-primary" id="btnSave" type="button">提交</button>
                                                        </div>
                                                        <div class="col-lg-3">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <#include "/common/footer.ftl">
        </div>
        <!---右侧内容区结束---->
     </div>
    <#include "/common/com_table_js.ftl">
    <script type="text/javascript" src="${ctx}/js/easytree/jquery.parser.js"></script>
    <script type="text/javascript" src="${ctx}/js/easytree/jquery.tree.js"></script>
    <script type="text/javascript">
        (function($,layer){
            function parse(data){
                var arr = [];
                var obj = {text:"菜单树",id:0,"state": "open"};
                var childrens = cteData(data);
                obj.children = childrens;
                if(obj.children){
                    $(obj.children).each(function(){
                        this.state = "open";
                        $(this.children).each(function(){
                            if(this.children && this.children.length > 0){
                                this.state = "closed";
                            }
                        })
                    });
                }
                arr.push(obj);
                return arr;
            }
            function cteData(data,level){
                var arr = [];
                $(data).each(function(){
                    var obj = {
                        text:this.name,
                        id:this.id,
                        parentId:this.parentId,
                        url:this.url,
                        idx:this.idx,
                        type:this.type
                    };
                    if(this.subMenus && this.subMenus.length >0){
                        obj.children = cteData(this.subMenus);
                    }else{
                        obj.children = null;
                    }
                    arr.push(obj);
                });
                return arr;
            }
            $.extend($.fn.tree.defaults, {
                loader: function (param, success, error) {
                    var opts = $(this).tree("options");
                    if (!opts.url) {
                        return false;
                    }
                    if (opts.queryParams) {
                        param = $.extend({}, opts.queryParams, param);
                    }
                    $.ajax({
                        type: opts.method,
                        url: opts.url,
                        data: param,
                        contentType: "application/json;charset=utf-8", //application/json
                        success: function (data) {
                            if(data.success){
                                success(parse(data.data));
                            }else{
                                layer.message(data.message);
                            }
                        },
                        error: function () {
                            error.apply(this, arguments);
                        }
                    });
                }
            });
        })(jQuery,layer);
        $(document).ready(function () {
            var selInfo = 0;
            var curNode;
            $("#tt").tree({
                url:"${ctx}/cms_menu_tree.do",
                method:'get',
                animate:true,
                checkbox:false,
                lines:true,
                onBeforeLoad:function(node,param){
                    param.parentId = 0;
                },
                onSelect:function (node) {
                    selInfo = node.id;
                    curNode = node;
                    $("#menu-tool").show();
                    $("#menu-edit").hide();
                    $("#menuToolNm").val(node.text);
                }
            });

            var addResume = function () {
                $("#menuName").val("");
                $("#curMenuId").val("");
                $("#menuSort").val("");
                $("#menuAddr").val("");
            }

            var resume = function(){
                selInfo = 0;
                $("#menu-tool").hide();
                $("#menu-edit").hide();
                $("#menuName").val("");
                $("#curMenuId").val("");
                $("#menuSort").val("");
                $("#menuAddr").val("");
            }

            var properInfo = function(isAdd){
                var obj = {
                    "name": $("#menuName").val(),
                    "url":$("#menuAddr").val(),
                    "idx":$("#menuSort").val(),
                    "id":$("#curMenuId").val()||"0",
                };
                if(isAdd){
                    obj["parentId"] = selInfo;
                    obj["type"] = 1;
                }
                return obj;
            }

            $("#btnSave").on("click",function () {
                var id = $("#curMenuId").val();
                var obj = {};
                if(id){
                    obj = properInfo(false);
                }else{
                    obj = properInfo(true);
                }
                var idx = ListPageManager.Popup.loading();
                $.ajax({
                    url:"${ctx}/cms_menu_edit.do",
                    data:obj,
                    success:function (e) {
                        $('#tt').tree('reload')
                        resume();
                    },
                    complete:function () {
                        ListPageManager.Popup.close(idx);
                    }
                });
            });

            $("#menu-tool").find(".btn").on("click",function () {
                var tg = $(this).attr("tg");
                if(tg == "addSub"){
                    $("#menu-edit").show();
                    addResume();
                }else if(tg == "modify"){
                    if(selInfo == 0){
                        layer.msg("菜单树不能修改");
                    }else{
                        if(curNode.type == 0){
                            layer.msg("系统菜单不能修改");
                            return;
                        }
                        addResume();
                        $("#menu-edit").show();
                        $("#menuName").val(curNode.text);
                        $("#menuAddr").val(curNode.url);
                        $("#menuSort").val(curNode.idx);
                        $("#curMenuId").val(curNode.id);
                    }
                }else if(tg == "delete"){
                    if(selInfo == 0){
                        layer.msg("菜单树不能删除");
                    }else{
                        if(curNode.type == 0){
                            layer.msg("系统菜单不能修改");
                            return;
                        }
                        var idx = ListPageManager.Popup.loading();
                        $.ajax({
                            url:"${ctx}/cms_menu_del.do",
                            data:{key:curNode.id},
                            success:function (e) {
                                $('#tt').tree('reload')
                                resume();
                            },
                            complete:function () {
                                ListPageManager.Popup.close(idx);
                            }
                        });
                    }
                }
            });

        });

    </script>
</body>
</html>
